<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Program Maintainance</title>
        <jsp:include page="commons/commoncss.jsp"/>

        <jsp:include page="commons/commonjs.jsp" />

        <script src="myscripts/createProgram.js"></script>
        <script src="myscripts/amendProgram.js"></script>

        <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                $('#programList').dataTable( {
                    "sScrollY": 200,
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "aoColumns": [
                        {  "sSelect": "Select",
                            "bSearchable": false,
                            "bSortable": false,
                        },
                        { "sName": "PROGRAM_NAME" },
                        { "sName": "DESCRIPTION" },
                        { "sName": "CONTACT" },
                        { "sName": "ISACTIVE" }
                    ]
                } );
            } );
        </script>
    </head>
    <body>
        <div id="container">
            <jsp:include page="commons/header.jsp" />
            <jsp:include page="commons/menubar.jsp"/>
            <div id="content">
                <div id="maincontent">
                    <div id="maincontentheader">
                        Program Maintainance
                    </div>
                    <div id="tabs">
                        <div class="ui-tabs-panel">
                            <div id="tablecontrols">
                                <span id="leftcontrols">
                                    <a href="#">All</a>
                                    <a href="#">|</a>
                                    <a href="#">A B C D E</a>
                                    <a href="#">|</a>
                                    <a href="#">F G H I J</a>
                                    <a href="#">|</a>
                                    <a href="#">K L M N</a>
                                    <a href="#">|</a>
                                    <a href="#">O P Q R</a>
                                    <a href="#">|</a>
                                    <a href="#">S T U V</a>
                                    <a href="#">|</a>
                                    <a href="#">W X Y Z</a>
                                </span>
                                <span id="rightcontrols">
                                    <button id="create-program">Create</button>
                                    <input type="checkbox"/><span>Include inactive</span>
                                </span>
                            </div>
                            <div>
                                <table cellpadding="0" cellspacing="0" border="0" class="display" id="programList">
                                    <thead>
                                        <tr>
                                            <th width="4%"></th>
                                            <th>Program Name</th>
                                            <th>Description</th>
                                            <th>Contact</th>
                                            <th width="12%" class="center">Is Active</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr onDblClick="amendProgram()">
                                            <td><input type="radio" name="program"/> </td>
                                            <td>ABC</td>
                                            <td>DEF</td>
                                            <td>FPT Cau Giay</td>
                                            <td class="center">Yes</td>
                                        </tr>
                                        <tr onDblClick="amendProgram()">
                                            <td><input type="radio" name="program"/> </td>
                                            <td>ABC</td>
                                            <td>DEF</td>
                                            <td>FPT Cau Giay</td>
                                            <td class="center">Yes</td>
                                        </tr>
                                        <tr onDblClick="amendProgram()">
                                            <td><input type="radio" name="program"/> </td>
                                            <td>ABC</td>
                                            <td>DEF</td>
                                            <td>FPT Cau Giay</td>
                                            <td class="center">Yes</td>
                                        </tr>
                                        <tr onDblClick="amendProgram()">
                                            <td><input type="radio" name="program"/> </td>
                                            <td>ABC</td>
                                            <td>DEF</td>
                                            <td>FPT Cau Giay</td>
                                            <td class="center">Yes</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div align="center">
                                <input type="button" name="btnCreate" value="Create" align="middle"/>
                                <input type="button" name="btnUpdate" value="Update" align="middle"/>
                                <input type="button" name="btnDelete" value="Delete" align="middle"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="create-dialog-form" title="Create new program">
                <form>
                    <table>
                        <tr>
                            <td>Program Name</td>
                            <td><input type="text" name="name" id="name" style="width:200px" class="text ui-widget-content ui-corner-all" /></td>
                        </tr>
                        <tr>
                            <td>Description</td>
                            <td><textarea name="description" id="description" style="width:200px"></textarea></td>
                        </tr>
                        <tr>
                            <td>Contact</td>
                            <td>
                                <input type="text" name="contact" id="contact" style="width:200px" class="text ui-widget-content ui-corner-all" />
                                <a href="" style="color:#0066FF">Lookup</a>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div id="amend-dialog-form" title="Amend program">
                <form>
                    <table>
                        <tr>
                            <td>Program Name</td>
                            <td><input type="text" name="aname" id="aname" style="width:200px" class="text ui-widget-content ui-corner-all" /></td>
                        </tr>
                        <tr>
                            <td>Description</td>
                            <td><textarea name="adescription" id="adescription" style="width:200px"></textarea></td>
                        </tr>
                        <tr>
                            <td>Contact</td>
                            <td>
                                <input type="text" name="acontact" id="acontact" style="width:200px" class="text ui-widget-content ui-corner-all" />
                                <a href="" style="color:#0066FF">Lookup</a>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <jsp:include page="commons/footer.jsp"/>
        </div>
    </body>
</html>

